//DOM元素节点的访问

console.log("======");
console.log(document.head);
console.log("======");
console.log(document.body);
console.log("======");
console.log(document.links);//页面中所有链接
console.log("======");
console.log(document.images);//页面中所有图片
console.log("======");
console.log(document.forms);//页面中所有表单
console.log("======");
console.log(document.getElementById("p1"));//按照标签的ID获取元素，应该是唯一的
console.log("======");
console.log(document.getElementsByName("text"));//获取页面中所有指定name属性值的元素集合
console.log("======");
console.log(document.getElementsByClassName("link"));//获取页面中所有指定class属性值的元素集合
console.log("======");
console.log(document.getElementsByTagName("img"));//获取页面中所有指定标签的元素集合
console.log("======");
console.log(document.querySelector("img"));//获取页面中符合指定CSS选择器的第一个元素
console.log("======");
console.log(document.querySelector(".link"));//获取页面中符合指定CSS选择器的第一个元素
console.log("======");
console.log(document.querySelectorAll("li>a"));//获取页面中符合指定CSS选择器的元素集合
console.log("======");

//DOM元素节点的操作  <p id="one" title="文字">段落内容</p>
//创建元素节点
let p = document.createElement("p");
p.setAttribute("id", "one");   //设置属性节点的值

//创建文本节点
let pTextNode = document.createTextNode("创建文本");
p.appendChild(pTextNode);

//创建属性节点
let pTitleAttrNode = document.createAttribute("title");
pTitleAttrNode.value = "鼠标提示信息：动态创建的文本段落标签p";
p.setAttributeNode(pTitleAttrNode);

document.body.appendChild(p);
document.body.insertBefore(p.cloneNode(true), document.body.firstChild);

let myBox = document.getElementById("box");
//元素（HTMLElement）操作
myBox.append("张三");
myBox.appendChild(p.cloneNode(true));
console.log("======");
console.log(myBox.children);  //当前元素节点的子元素节点
console.log("======");
console.log(myBox.firstElementChild);
console.log("======");
console.log(myBox.lastElementChild);
console.log("======");
console.log(myBox.firstElementChild.nextElementSibling);
console.log("======");
console.log(myBox.lastElementChild.previousElementSibling);
console.log("======");
console.log(myBox.innerHTML);
console.log("======");
console.log(myBox.outerHTML);
console.log("======");
console.log(myBox.innerText);
console.log("======");
console.log(myBox.textContent);
console.log("======");


let myContent = document.getElementById("content");
// myContent.querySelector("p").remove();  //移除元素节点
// myContent.removeChild(myContent.lastElementChild);  //移除指定子元素节点
myContent.append("last");
myContent.prepend("first")

//获取属性
if (myContent.hasAttributes()) {
    let attrs = myContent.attributes;
    for (let i = 0; i < attrs.length; i++){
        const element = attrs[i];
        console.log(`${element.name}:${element.value}`)
    }
}

//操作属性
// myContent.setAttribute("class", "b");
myContent.className = "b";
if (myContent.hasAttribute("class")) {
    myContent.setAttribute("class", "b");
}

// myContent.className = "c";
myContent.classList.add("b");
myContent.classList.add("c");
myContent.classList.remove("c");
myContent.classList.toggle("c");